<template>
  <div>
    <a-card>
      <a-button type="primary" @click="showModal"> <PlusOutlined style="color: #ffff" />添加数据</a-button>
      <a-button style="margin-left: 10px" @click="Refresh"> <UndoOutlined />刷新</a-button>
      <!-- 新建弹框 -->
      <a-modal v-model:visible="isModalVisible" title="新建" @ok="handleOk()" @visibleChange="handleModalVisibleChange" style="width: 900px">
        <a-form :model="formState" :rules="rules" ref="formRef" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
          <a-form-item ref="Name" label="数据名称:" name="Name">
            <a-input v-model:value="formState.name" placeholder="请填写数据名称" />
          </a-form-item>
          <a-form-item label="数据类型:" name="DataType">
            <a-select v-model:value="formState.type" placeholder="请选择数据类型">
              <a-select-option :value="1">布尔型</a-select-option>
              <a-select-option :value="2">Bit型</a-select-option>
              <a-select-option :value="3">整数型</a-select-option>
              <a-select-option :value="4">浮点型</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item ref="DataFromName" label="数据来源:" name="DataFromName">
            <div style="display: flex">
              <a-input v-model:value="formState.DataFromName" placeholder="请填写数据来源" />
              <a-tooltip placement="right">
                <template #title>
                  <span>数据源</span>
                </template>
                <a-button style="margin-left: 5px" @click="dataSourcemodel"><ClusterOutlined /></a-button>
              </a-tooltip>
            </div>
          </a-form-item>
          <a-form-item ref="conversionExpression" label="换算表达式:" name="conversionExpression">
            <a-input v-model:value="formState.conversionExpression" placeholder="请填写换算表达式" />
          </a-form-item>
          <a-form-item ref="DataDefaultValue" label="默认值:" name="conversionExpression">
            <a-input v-model:value="formState.DataDefaultValue" placeholder="请填写默认值" />
          </a-form-item>
          <a-form-item label="是否告警:" name="dataAlarm">
            <a-select v-model:value="formState.dataAlarm" placeholder="请选择是否告警">
              <a-select-option :value="1">是</a-select-option>
              <a-select-option :value="2">否</a-select-option>
            </a-select>
          </a-form-item>
          <!-- --------------------显示↓影藏--------------------------- -->
          <a-form-item label="警告等级:" name="alarmLevel" v-if="formState.dataAlarm === 1">
            <a-select v-model:value="formState.alarmLevel" placeholder="请选择警告等级">
              <a-select-option :value="1">提示</a-select-option>
              <a-select-option :value="2">次要</a-select-option>
              <a-select-option :value="3">重要</a-select-option>
              <a-select-option :value="4">紧急</a-select-option>
              <a-select-option :value="5">致命</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item ref="AlarmMessage" label="告警显示信息:" name="AlarmMessage" v-if="formState.dataAlarm === 1">
            <a-input v-model:value="formState.AlarmMessage" placeholder="请填写告警显示信息" />
          </a-form-item>
          <a-form-item ref="AlarmClearMessage" label="消除显示信息:" name="AlarmClearMessage" v-if="formState.dataAlarm === 1">
            <a-input v-model:value="formState.AlarmClearMessage" placeholder="请填写消除显示信息" />
          </a-form-item>
          <a-form-item label="是否存储:" name="alarm" v-if="formState.dataAlarm === 2">
            <a-select v-model:value="formState.alarm" placeholder="请选择是否存储">
              <a-select-option :value="1">是</a-select-option>
              <a-select-option :value="2">否</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="存储方式:" name="RecordType" v-if="formState.alarm === 1">
            <a-select v-model:value="formState.RecordType" placeholder="请选择警告等级">
              <a-select-option :value="1">定时存储</a-select-option>
              <a-select-option :value="2">变化存储</a-select-option>
              <a-select-option :value="3">即时存储</a-select-option>
              <a-select-option :value="4">变化百分比</a-select-option>
            </a-select>
          </a-form-item>
          <!-- 编辑框根据存储方式定时存储显示 -->
          <a-form-item label="存储间隔(单位:秒):" name="recordInterval" v-if="formState.RecordType === 1">
            <a-select v-model:value="formState.recordInterval" placeholder="请选择警告等级">
              <a-select-option :value="1">提示</a-select-option>
              <a-select-option :value="2">次要</a-select-option>
              <a-select-option :value="3">重要</a-select-option>
              <a-select-option :value="4">紧急</a-select-option>
              <a-select-option :value="5">致命</a-select-option>
            </a-select>
          </a-form-item>
          <!--添加框存储方式>变化存储显示  ||  编辑框存储方式>变化存储隐藏-->
          <a-form-item ref="RecordDataCharge" label="变化值:" name="RecordDataCharge" v-if="formState.RecordType === 2 || formState.RecordType === 4">
            <a-input v-model:value="formState.RecordDataCharge" placeholder="请填写变化值" />
          </a-form-item>
          <!-- 百分比更具编辑的存储方式>变化百分比值显示 -->
          <a-form-item
            ref="RecordDataCharge"
            label="百分比(%):"
            name="RecordDataCharge"
            v-if="formState.dataAlarm === 1 && formState.RecordType === 4"
          >
            <a-input v-model:value="formState.RecordDataCharge" placeholder="请填写百分比" />
          </a-form-item>
          <!-- -------------------显示↑影藏---------------------------- -->
          <a-form-item ref="unit" label="单位:" name="unit">
            <a-input v-model:value="formState.unit" placeholder="请填写单位名称" />
          </a-form-item>
          <a-form-item ref="DataDescription" label="描述:" name="DataDescription">
            <a-textarea v-model:value="formState.DataDescription" placeholder="请填写描述" />
          </a-form-item>
        </a-form>
      </a-modal>
      <!-- 编辑弹框 -->
      <a-modal v-model:visible="iseithModalVisible" title="编辑" @ok="handleOk()" @visibleChange="handleModalVisibleChange" style="width: 900px">
        <a-form :model="formState" :rules="rules" ref="formRef" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
          <a-form-item ref="Name" label="数据名称:" name="Name">
            <a-input v-model:value="formState.name" placeholder="请填写数据名称" />
          </a-form-item>
          <a-form-item label="数据类型:" name="DataType">
            <a-select v-model:value="formState.type" placeholder="请选择数据类型">
              <a-select-option :value="1">布尔型</a-select-option>
              <a-select-option :value="2">Bit型</a-select-option>
              <a-select-option :value="3">整数型</a-select-option>
              <a-select-option :value="4">浮点型</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item ref="DataFromName" label="数据来源:" name="DataFromName">
            <div style="display: flex">
              <a-input v-model:value="formState.DataFromName" placeholder="请填写数据来源" />
              <a-tooltip placement="right">
                <template #title>
                  <span>数据源</span>
                </template>
                <a-button style="margin-left: 10px"><ClusterOutlined /></a-button>
              </a-tooltip>
            </div>
          </a-form-item>
          <a-form-item ref="conversionExpression" label="换算表达式:" name="conversionExpression">
            <a-input v-model:value="formState.conversionExpression" placeholder="请填写换算表达式" />
          </a-form-item>
          <a-form-item ref="DataDefaultValue" label="默认值:" name="conversionExpression">
            <a-input v-model:value="formState.DataDefaultValue" placeholder="请填写默认值" />
          </a-form-item>
          <a-form-item label="是否告警:" name="dataAlarm">
            <a-select v-model:value="formState.dataAlarm" placeholder="请选择是否告警">
              <a-select-option :value="1">是</a-select-option>
              <a-select-option :value="2">否</a-select-option>
            </a-select>
          </a-form-item>
          <!-- --------------------显示↓影藏--------------------------- -->
          <a-form-item label="警告等级:" name="alarmLevel" v-if="formState.dataAlarm === 1">
            <a-select v-model:value="formState.alarmLevel" placeholder="请选择警告等级">
              <a-select-option :value="1">提示</a-select-option>
              <a-select-option :value="2">次要</a-select-option>
              <a-select-option :value="3">重要</a-select-option>
              <a-select-option :value="4">紧急</a-select-option>
              <a-select-option :value="5">致命</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item ref="AlarmMessage" label="告警显示信息:" name="AlarmMessage" v-if="formState.dataAlarm === 1">
            <a-input v-model:value="formState.AlarmMessage" placeholder="请填写告警显示信息" />
          </a-form-item>
          <a-form-item ref="AlarmClearMessage" label="消除显示信息:" name="AlarmClearMessage" v-if="formState.dataAlarm === 1">
            <a-input v-model:value="formState.AlarmClearMessage" placeholder="请填写消除显示信息" />
          </a-form-item>
          <a-form-item label="是否存储:" name="alarm" v-if="formState.dataAlarm === 2">
            <a-select v-model:value="formState.alarm" placeholder="请选择是否存储">
              <a-select-option :value="1">是</a-select-option>
              <a-select-option :value="2">否</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="存储方式:" name="RecordType" v-if="formState.alarm === 1">
            <a-select v-model:value="formState.RecordType" placeholder="请选择警告等级">
              <a-select-option :value="1">定时存储</a-select-option>
              <a-select-option :value="2">变化存储</a-select-option>
              <a-select-option :value="3">即时存储</a-select-option>
              <a-select-option :value="4">变化百分比</a-select-option>
            </a-select>
          </a-form-item>
          <!-- 编辑框根据存储方式定时存储显示 -->
          <a-form-item label="存储间隔(单位:秒):" name="recordInterval" v-if="formState.RecordType === 1">
            <a-select v-model:value="formState.recordInterval" placeholder="请选择警告等级">
              <a-select-option :value="1">提示</a-select-option>
              <a-select-option :value="2">次要</a-select-option>
              <a-select-option :value="3">重要</a-select-option>
              <a-select-option :value="4">紧急</a-select-option>
              <a-select-option :value="5">致命</a-select-option>
            </a-select>
          </a-form-item>
          <!--添加框存储方式>变化存储显示  ||  编辑框存储方式>变化存储隐藏-->
          <a-form-item ref="RecordDataCharge" label="变化值:" name="RecordDataCharge" v-if="formState.RecordType === 2">
            <a-input v-model:value="formState.RecordDataCharge" placeholder="请填写变化值" />
          </a-form-item>
          <!-- 百分比更具编辑的存储方式>变化百分比值显示 -->
          <a-form-item ref="RecordDataCharge" label="百分比(%):" name="RecordDataCharge" v-if="formState.RecordType === 4">
            <a-input v-model:value="formState.RecordDataCharge" placeholder="请填写百分比" />
          </a-form-item>
          <!-- -------------------显示↑影藏---------------------------- -->
          <a-form-item ref="unit" label="单位:" name="unit">
            <a-input v-model:value="formState.unit" placeholder="请填写单位名称" />
          </a-form-item>
          <a-form-item ref="DataDescription" label="描述:" name="DataDescription">
            <a-textarea v-model:value="formState.DataDescription" placeholder="请填写描述" />
          </a-form-item>
        </a-form>
      </a-modal>
      <!-- 数据模型框 -->
      <a-modal v-model:open="open" title="数据模型" @ok="handleOkdata" style="width: 800px">
        <div style="border: 1px solid #f1f1f1; width: 750px; height: 500px">
          <div style="border: 1px solid #f1f1f1; width: 740px; height: 40px; margin-left: 5px; margin-top: 10px; border-radius: 3px">
            <p style="line-height: 40px; margin-left: 24px">数据来源</p>
          </div>
          <div style="border: 1px solid #f1f1f1; width: 740px; height: 55px; margin-left: 5px; border-radius: 3px">
            <a-form :model="formState" :rules="rules" ref="formRef" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }" style="margin-top: 10px">
              <a-row>
                <a-col :span="12">
                  <a-form-item label="数据来源:" name="DataFromName">
                    <a-select v-model:value="formState.DataFromName" placeholder="请选择警告等级" @change="EquiPmentClick">
                      <a-select-option :value="1">设备</a-select-option>
                      <a-select-option :value="2">数据模型</a-select-option>
                      <a-select-option :value="3">系统数据</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="12" v-if="formState.DataFromName === 1">
                  <a-form-item label="绑定设备:" name="recordInterval">
                    <a-tree-select
                      v-model:value="formState.recordInterval"
                      show-search
                      style="width: 100%"
                      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                      placeholder="请选择下面数据"
                      allow-clear
                      @change="onTreeSelectChange"
                      tree-default-expand-all
                      :tree-data="treeData"
                      tree-node-filter-prop="label"
                      :field-names="{
                        children: 'children',
                        label: 'text',
                        value: 'key',
                      }"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12" v-if="formState.DataFromName === 2">
                  <a-form-item label="选择设备类型:" name="dataRecord">
                    <a-select v-model:value="formState.dataRecord" placeholder="请选择设备类型" @change="ModelData">
                      <a-select-option v-for="item in DeviceTypelist" :key="item.index" :value="item.type">{{ item.dec }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <div style="display: flex" v-if="showDataModelList">
            <!-- 数据模型列表 -->
            <div style="height: 275px; width: 200px; border: 1px solid #f1f1f1; margin-top: 20px; border-radius: 5px">
              <div style="border: 1px solid #f1f1f1; height: 35px; line-height: 35px; text-align: center">数据模型列表</div>
              <div
                class="sensor-item"
                v-for="(item, index) in items"
                :key="index"
                @click="DataModelsList(index)"
                :style="{ backgroundColor: item.isActive ? '#6c9ed2' : 'transparent' }"
              >
                <FolderOutlined v-show="!item.isActive" class="icon" />
                <FolderOpenOutlined v-show="item.isActive" style="margin-left: 10px" class="icon hidden" />
                <span style="margin-left: 10px" class="sensor-name">{{ item.name }}</span>
              </div>
            </div>
            <div style="width: 100%">
              <a-table
                :dataSource="dataSourcetd"
                :rowClassName="rowClassName"
                @rowClick="handleRowClick"
                :columns="columnstd"
                bordered
                style="margin-top: 10px"
                :pagination="{ pageSize: 4 }"
              />
            </div>
          </div>
          <div style="width: 100%" v-if="showDataModelListxx">
            <a-table :dataSource="dataSourcexx" :columns="columnstdxx" bordered style="margin-top: 10px" :pagination="{ pageSize: 4 }" />
          </div>
          <div style="width: 100%" v-if="showDataModelListay">
            <a-table :dataSource="dataSourceay" :columns="columnstday" bordered style="margin-top: 10px" :pagination="{ pageSize: 4 }" />
          </div>
        </div>
      </a-modal>
      <a-table :dataSource="dataSources" :columns="columns" bordered style="margin-top: 5px" :custom-row="() => ({ style: { height: '35px' } })">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-button type="link" @click="EditbulletFrame(record)"><FormOutlined />编辑</a-button>
            <a-popconfirm
              title="删除"
              ok-text="确认"
              cancel-text="取消"
              description="你确定要删除吗?"
              @confirm="handleDelete(record)"
              @cancel="cancel"
            >
              <a-button type="link" danger> <DeleteOutlined style="color: red" />删除</a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>
<script setup>
  import { ref, onMounted, reactive, watch } from 'vue';
  import { CustomDeviceApi } from '/@/api/system/CustomDevice.js';
  import { message } from 'ant-design-vue';

  const items = ref([]); // 用于存储数据模型
  const Refresh = () => {
    GustomModelList();
    message.success('刷新成功');
  };
  const open = ref(false);
  const dataSourcemodel = () => {
    open.value = true;
    showDataModelList.value = false; // 点击树形内容后隐藏数据模型列表
    showDataModelListay.value = false;
  };
  const handleOkdata = (e) => {
    console.log(e);
    open.value = false;
  };

  // 表格列配置
  const columns = ref([
    {
      title: '序号',
      dataIndex: 'ID',
      key: 'ID',
    },
    {
      title: '数据名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '设备模型',
      dataIndex: 'auth',
      key: 'auth',
    },
    {
      title: '数据类型',
      dataIndex: 'list',
      key: 'list',
    },
    {
      title: '单位',
      dataIndex: 'unit',
      key: 'unit',
    },
    {
      title: '默认值',
      dataIndex: 'DataDefaultValue',
      key: 'DataDefaultValue',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 200,
    },
  ]);
  //   表格初始化数据
  const dataSources = ref([]);
  async function GustomModelList() {
    const parms = {
      type: 1,
    };
    try {
      const res = await CustomDeviceApi.GetCustomDataList();
      // console.log(res);
      dataSources.value = res.list;
    } catch (error) {
      console.error('表格数据出错', error);
    }
  }
  // 新建弹框
  const formState = reactive({
    selectedItem: [], // 用于保存选中的项（支持多选）
    name: '',
    auth: '',
    type: '',
    conversionExpression: '',
    unit: '',
    alarm: '',
    RecordDataCharge: '',
    RecordType: 0,
    modeltype: 20,
    Description: '',
    alarmLevel: '',
    AlarmMessage: '',
    record: null,
    AlarmClearMessage: '',
    recordInterval: [],
    uuid: '',
    DataFromName: null,
    dataRecord: null,
  });
  const isModalVisible = ref(false);
  const showModal = () => {
    isModalVisible.value = true;
  };
  // 绑定设备值树形获取数据
  const DeviceTypelist = ref([]);
  const EquiPmentClick = (recordInterval) => {
    if (recordInterval === 1) {
      isDataModelVisible.value = false;
      showDataModelList.value = false; //数据模型列表和表格
      showDataModelListay.value = false;
      showDataModelListxx.value = true;
      CustomDeviceApi.monitortree().then((data) => {
        treeData.value = data.list;
      });
    } else if (recordInterval === 2) {
      isDataModelVisible.value = true;
      showDataModelListxx.value = false; //表格
      showDataModelListay.value = false;
      showDataModelList.value = true; //数据模型列表和表格
      CustomDeviceApi.supportDevice().then((data) => {
        DeviceTypelist.value = data.list;
      });
    } else if (recordInterval === 3) {
      isDataModelVisible.value = false;
      showDataModelListay.value = true;
      showDataModelListxx.value = false;
      showDataModelList.value = false; //数据模型列表和表格
      CustomDeviceApi.GetSystemData().then((data) => {
        console.log(data);
        dataSourceay.value = data.data;
      });
    }
  };
  const value = ref();
  const treeData = ref([]); //树形数据

  const columnstd = ref([
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
  ]);
  const columnstdxx = ref([
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
  ]);

  const columnstday = ref([
    {
      title: '名称',
      dataIndex: 'nameCh',
      key: 'nameCh',
    },
  ]);
  const isDataModelVisible = ref(true); // 控制数据模型列表的显示
  const showDataModelList = ref(true); // 控制数据模型列表显示的状态
  const showDataModelListxx = ref(true);
  const showDataModelListay = ref(true); // xx表格显示的状态

  // 绑定设备树值
  const onTreeSelectChange = async (value, node, extra) => {
    console.log(extra);
    // console.log(extra.triggerNode.props.value)
    const parms = {
      ProjectUuid: extra.triggerNode.props.value.ProjectUUID,
      uuid: extra.triggerNode.props.value.uuid,
      IsRemoveGW: false,
    };
    await treetabledata(parms); // 调用方法并传递参数
    showDataModelList.value = false; // 点击树形内容后隐藏数据模型列表
  };

  const dataSourcexx = ref([]);
  const treetabledata = async (parms) => {
    // 接收参数
    try {
      const res = await CustomDeviceApi.getRealData(parms);
      dataSourcexx.value = res.realData; // 假设你的返回数据是这个结构
    } catch (error) {
      console.error('表格数据出错', error);
    }
  };
  const ModelData = async (val) => {
    try {
      const prams = {
        type: val,
      };
      const res = await CustomDeviceApi.snmpmodellist(prams);
      items.value = res.list.map((item) => ({
        ...item,
        type: item.type,
        muid: item.muid,
      }));
    } catch (error) {
      console.error('模型数据列表出错', error);
    }
  };
// 模型数据列表对接表格数据
  const dataSourcetd = ref([]);
  async function DataModelsList(val) {
    items.value[val].isActive = !items.value[val].isActive;
    items.value.forEach((item, idx) => {
      item.isActive = idx === val; // 只将当前点击的项设为活跃
    });
    const selectedType = items.value[val].type;
    const selectedMuid = items.value[val].uuid;
    const parms = {
      muid: selectedMuid,
      type: selectedType,
    };
    const res = await CustomDeviceApi.snmpmodelgetmibs(parms);
    console.log(res);
    dataSourcetd.value = res.mibs;
}
// 选中表格内容


  // 系统数据对接表格
  const dataSourceay = ref([]);
  const iseithModalVisible = ref(false);
  async function EditbulletFrame(record) {
    iseithModalVisible.value = true;
  }
  const SelectContent = () => {
    console.log('表格内容被点击了~~~~~~~~~');
  };
  // 删除
  async function handleDelete(record) {
    const prams = {
      uuid: record.uuid,
    };
    try {
      const res = await CustomDeviceApi.DelCustomData(prams);
      message.success('删除成功');
      GustomModelList();
    } catch (error) {
      console.error('删除失败', error);
    }
  }
  // const rules = {
  //   name: [
  //     {
  //       required: true,
  //       message: '请填写数据名称',
  //       trigger: 'change',
  //     },
  //   ],
  //   auth: [
  //     {
  //       required: true,
  //       message: '请选择访问级别',
  //       trigger: 'change',
  //     },
  //   ],
  // selectedItem: [
  //   {
  //     required: true,
  //     message: '请选择项目',
  //     trigger: 'change'
  //   }
  // ];
  //   type: [
  //     {
  //       required: true,
  //       message: '请选择数据类型',
  //       trigger: 'change',
  //     },
  //   ],

  //   alarm: [
  //     {
  //       required: true,
  //       message: '请选择是否告警',
  //       trigger: 'change',
  //     },
  //   ],
  //   alarmLevel: [
  //     {
  //       required: true,
  //       message: '请选择告警等级',
  //       trigger: 'change',
  //     },
  //   ],
  //   AlarmMessage: [
  //     {
  //       required: true,
  //       message: '请填写告警显示信息',
  //       trigger: 'change',
  //     },
  //   ],
  // };
  watch(
    () => formState.DataFromName,
    (recordInterval) => {}
  );
  onMounted(() => {
    GustomModelList();
  });
</script>

<style scoped>
  .sensor-item {
    border: 1px solid #f1f1f1;
    height: 30px;
    line-height: 30px;
    cursor: pointer; /* 鼠标悬停时显示小手 */
    display: flex;
    align-items: center;
    /* padding: 0 10px; */
  }

  .sensor-item:hover {
    background-color: #d8eafb; /* 悬停时背景色 */
  }

  .icon {
    margin-left: 10px;
  }
  .selected-row {
  background-color: blue !important; /* Change color as necessary */
  color: white; /* Adjust text color if needed */
}
</style>
